<template>
  <div class="main">
    <div class="sousuo box-shadow">
      <a-form
          ref="cellQueryFormRef"
          :model="forms"
          :label-col="labelCol"
          layout="inline">
        <a-form-item label="监控点选择">
          <a-select v-model:value="forms.select1" @change="www">
            <a-select-option :value="null" key="0">全部</a-select-option>
            <a-select-option
                v-for="sec in se" :key="sec.sectionId" :value="sec.sectionId">
              {{ sec.sectionName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-right: 32px">
          <a-select v-model:value="forms.select2" @change="ww">
            <a-select-option
                v-for="section in sections" :key="section.id" :value="section.id">
              {{ section.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button @click="getAll" type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="echarts-box">
      <div class="huanjing box-shadow">
        <span>环境总览</span>
        <div style="width: 412px; height: 259px" id="mains"></div>
      </div>
      <div class="kongqi box-shadow">
        <div class="air-header-box">
          <span>空气质量</span>
          <div class="btn-end">
            <a-range-picker
                @change="onChange"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="[
                  moment(new Date()).subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss'),
                  moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD HH:mm:ss')
                  ]"></a-range-picker>
            <a-button @click="getAlls" type="primary" style="margin-left: 20px">查询</a-button>
          </div>
        </div>
        <div style="width: 856px; height: 242px" id="weather"></div>
      </div>
    </div>
    <div class="huanjingyinzi box-shadow">
      <div class="divisor-header-box">
        <span>环境因子</span>
        <div class="btn-end">
          <a-date-picker
              @change="creatChange"
              :placeholder="[moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD')]"
              format="YYYY-MM-DD"
          />
          <a-button @click="clchagement" type="primary" style="margin-left: 20px">查询</a-button>
        </div>
      </div>
      <div class="zhexian" id="yz"></div>
      <div id="juxing"></div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import axios from "@/utils/axios";
import * as echarts from "echarts";
import { useStore } from "vuex";
import { ref } from "vue";

export default {
  data() {
    return {
      forms: {
        select1: "",
        select2: "",
      },
      ttts: [],
      se: [],
      tt: [],
      yus: [],
      sections: [],
      cellQueryFormState: [],
      labelCol: { style: { width: "100px" } },
      wrapperCol: { style: { width: "150px" } },
      rger: [],
      dater: [],
      erugyhu: [],
      createValue: [],
    };
  },
  methods: {
    momentTime (time, format) {
      return moment(time, format)
    },
    getAlls() {
      this.yu();
    },
    clchagement() {
      this.hj();
    },
    moment,
    onChange(value, dateString) {
      this.createValue = value;
      this.rger = dateString[0];
      this.erugyhu = dateString[1];
    },
    creatChange(dateString) {
      let a = moment(dateString._d).format("YYYY-MM-DD");
      this.dater = a;
    },

    hj() {
      axios
          .post(
              "weather/findWeatherData",
              JSON.stringify({
                id: this.tt != 0 ? this.tt : 0,
                date: this.dater != 0 ? this.dater : moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD'),
              }),
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
          )
          .then((tes) => {
            let wendu = [];
            let shidu = [];
            let time = [];
            let pm25 = [];
            let pm10 = [];
            let noise = [];
            let wind = [];
            let rain = [];
            rain = tes.data.rain;
            wind = tes.data.wind;
            pm10 = tes.data.pm10;
            noise = tes.data.noise;
            pm25 = tes.data.pm25;
            wendu = tes.data.temperature;
            shidu = tes.data.humidity;
            time = tes.data.time;
            this.myChartss = echarts.init(document.getElementById("yz"));
            this.myChartss.setOption({
              title: {},
              tooltip: {
                trigger: "axis",
              },
              legend: {
                bottom: "5%",
                left: "91.5%",
                textStyle: {
                  fontSize: 14,
                  color: "black",
                },
                data: [
                  { name: "温度(℃)", icon: "line" },
                  { name: "湿度(%)", icon: "line" },
                  { name: "PM2.5(ug/m³)", icon: "line" },
                  { name: "PM10(ug/m³)", icon: "line" },
                  { name: "噪声(dB)", icon: "line" },
                  { name: "风力(m/s)", icon: "line" },
                  { name: "降雨(mm)", icon: "line" },
                ],
              },
              grid: {
                left: "3%",
                right: "16%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {},
              xAxis: {
                axisTick: {
                  //去掉坐标轴刻线
                  show: false,
                },
                axisLabel: {
                  // X轴线 标签修改
                  textStyle: {
                    color: "#c3c3c3", //坐标值得具体的颜色
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#c3c3c3",
                  },
                },
                type: "category",
                boundaryGap: false,
                data: time,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  symbol: "none",
                  icon: "rect", // 用矩形替换
                  name: "温度(℃)",
                  type: "line",
                  stack: "Total",
                  data: wendu,
                  itemStyle: {
                    normal: {
                      color: "#5B8FF9",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  symbol: "none",
                  name: "湿度(%)",
                  type: "line",
                  stack: "Total",
                  data: shidu,
                  itemStyle: {
                    normal: {
                      color: "#5AD8A6",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  symbol: "none",
                  name: "PM2.5(ug/m³)",
                  type: "line",
                  stack: "Total",
                  data: pm25,
                  itemStyle: {
                    normal: {
                      color: "#5D7092",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  name: "PM10(ug/m³)",
                  type: "line",
                  stack: "Total",
                  symbol: "none",
                  data: pm10,
                  itemStyle: {
                    normal: {
                      color: "#F6BD16",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  name: "噪声(dB)",
                  type: "line",
                  symbol: "none",
                  stack: "Total",
                  data: noise,
                  itemStyle: {
                    normal: {
                      color: "#0046B6",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  name: "风力(m/s)",
                  type: "line",
                  symbol: "none",
                  stack: "Total",
                  data: wind,
                  itemStyle: {
                    normal: {
                      color: "#19A160",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
                {
                  name: "降雨(mm)",
                  type: "line",
                  symbol: "none",
                  stack: "Total",
                  data: rain,
                  itemStyle: {
                    normal: {
                      color: "#EA8F00",

                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                },
              ],
            });
          });
    },
    yu() {
      axios
          .post(
              "weather/findAQI",
              JSON.stringify({
                id: this.tt != 0 ? this.tt : 0,
                startTime: this.rger != 0 ? this.rger : moment(new Date()).subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss'),
                endTime: this.erugyhu != 0 ? this.erugyhu : moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD HH:mm:ss'),
              }),
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
          )
          .then((re) => {
            let pp = [];
            let ss = [];
            let Arrkq = [];
            let you = [];
            let rfgujir = [];
            Arrkq = re.data;

            Arrkq.forEach(function (item) {
              let obj = {};

              var dateLength = item.dateTime.length;
              var da = item.aqiStr.length;
              obj.yy = item.aqiStr.substring(da - 2, da);
              obj.dd = item.aqiStr.substring(0, 5);
              obj.name = item.dateTime.substring(dateLength - 5, dateLength);
              pp.push(obj.name);
              ss.push(obj.dd);
              you.push(obj.yy);
              var gr = item.aqiStr.split("0");
              rfgujir.push(gr[1]);
            });

            /* for (let index = 0; index < Arrkq.length; index++) {
              const element = Arrkq[index].dateTime;
              return  element
            } */
            // 4, 7, 9, 2, 6

            this.myCharts = echarts.init(document.getElementById("weather"));
            this.myCharts.setOption({
              title: {},
              tooltip: {
                trigger: "axis",
                formatter: function (params) {
                  //自定义样式
                  var str = "";
                  for (var i = 0; i < params.length; i++) {
                    str +=
                        '<p class="fl" style="width:140px;margin-top:5%">' +
                        "空气质量" +
                        '<span style="margin-left:15%">' +
                        params[i].value +
                        "</span> " +
                        "</p>";
                    if (params[i].value <= 50) {
                      var yu = "优";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: green;margin-left:20%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if (params[i].value <= 100) {
                      var yu = "良好";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color:#FFCC00;margin-left:20%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if (params[i].value <= 150) {
                      var yu = "轻度污染";

                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FF6600;margin-left:15%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if (params[i].value <= 200) {
                      var yu = "中度污染";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: red;margin-left:15%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if (params[i].value <= 300) {
                      var yu = "重度污染";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #9900FF;margin-left:15%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if (params[i].value > 300) {
                      var yu = "严重污染";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color:#8E236B;margin-left:15%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    } else if ((params[i].value = "--")) {
                      var yu = "无数据";
                      var tooltipHtml =
                          '<div style="width:140px;overflow-y:auto">' +
                          params[0].axisValue +
                          '<span style="width: 12px;height: 17px;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: black;margin-left:20%">' +
                          yu +
                          "</span> " +
                          str +
                          "</div>";
                    }
                  }

                  return tooltipHtml;
                },
                position: ["15%", "20%"], //显示的位置
              },

              xAxis: {
                axisTick: {
                  //去掉坐标轴刻线
                  show: false,
                },

                data: pp,
              },
              yAxis: {
                axisLabel: {},
              },

              series: [
                {
                  barWidth: 15,
                  type: "bar",
                  data: ss,
                  itemStyle: {
                    normal: {
                      color: function (params) {
                        var indexu = (params = params.value);
                        if (indexu <= 50) {
                          return "green";
                        } else if (indexu <= 100) {
                          return "#FFCC00";
                        } else if (indexu <= 150) {
                          return "#FF6600";
                        } else if (indexu <= 200) {
                          return "red";
                        } else if (indexu <= 300) {
                          return "#9900FF";
                        } else if (indexu > 300) {
                          return "#8E236B";
                        }
                      },
                    },
                  },
                },
                {
                  type: "line",
                  markLine: {
                    symbol: ["none", "none"],
                    silent: true,
                    lineStyle: {
                      normal: {
                        type: "solid", // 线的类型（实线、虚线、点线）
                        color: "#D1462F",
                        cap: "butt",
                        join: "bevel",
                      },
                    },
                    data: [
                      {
                        yAxis: [50],
                      },
                    ],
                    label: {
                      show: false,
                      position: "insideStartBottom",
                      color: "rgb(91, 155, 213)",
                    },
                  },
                },

                {
                  name: "平行于y轴的趋势线",
                  type: "line",
                },
              ],
            });
          });
    },
    ww(pd) {
      let obj = {};
      obj = this.sections.find((item) => {
        return item.id === pd;
      });
      this.yus = obj.id;
      this.tt = this.yus;
    },
    www(pdd, value) {
      let objs = {};
      objs = this.se.find((item) => {
        return item.sectionId === pdd;
      });

      if (value.key == 0) {
        this.ttts = null;
        this.ALL();
        this.forms.select2 = "";
      } else {
        this.ttts = objs.sectionId;
        this.forms.select2 = "";
        this.tt = 0;
        this.ALL();
      }
    },
    ec() {
      axios
          .post(
              "/weather/findAnalyze",
              JSON.stringify({
                id: this.tt != 0 ? this.tt : 0,
              }),
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
          )
          .then((res) => {
            this.myChart = echarts.init(document.getElementById("mains"));
            var data = [
              {
                name: "扬尘",
                value: res.data.abnormal,
              },
              {
                name: "正常",
                value: res.data.normal,
              },
            ];

            var subText = res.data.percentage + "%";
            this.myChart.setOption({
              title: {
                text: "扬尘占比",
                subtext: subText,
                textStyle: {
                  fontSize: 12,
                  color: "rgba(0,0,0,0.65)",
                  fontWeight: 600,
                },
                subtextStyle: {
                  fontSize: 32,
                  color: "#000000",
                  fontWeight: 500,
                },
                textAlign: "center",
                x: "45%",
                y: "35%",
              },
              color: ["#115ea9", "#1677ff"],
              tooltip: {
                trigger: "item",
                formatter: "{b}<br/> {c}天  ({d}%)",
              },
              legend: {
                orient: "vertical",
                right: "1%",
                top: "center",
                align: "left",
                itemGap: 20,
                icon: "circle",
                itemWidth: 10,
                data: data,
              },
              series: [
                {
                  radius: ["50%", "80%"],
                  center: ["45%", "45%"],
                  type: "pie",
                  label: {
                    normal: {
                      formatter: function (data) {
                        let b = data.value + "天";
                        subText = b;
                        return b;
                      },
                      position: "inner",
                      color: "#fff",
                    },
                  },
                  data: data,
                },
              ],
            });
          });
    },
    getAll() {
      this.ec();
      this.yu();
      this.hj();
    },
    ALL() {
      axios
          .post(
              "/weather/findAllStation",
              JSON.stringify({
                sectionId: this.ttts != 0 ? this.ttts : null,
              }),
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
          )
          .then((ress) => {
            this.sections = ress.data;

            (this.tt = this.sections[0].id),
                (this.forms.select2 = this.sections[0].name);
            this.ec();
            this.yu();
            this.hj();
          });
    },
    de() {
      const store = useStore();
      const se = ref(
          JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"]))
      );
      this.se = se;
    },
  },
  mounted() {
    this.de();
    this.forms.select1 = null;

    this.ec();
    this.ALL();
    this.yu();
    this.hj();
    let nowDate = new Date()
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate()
    }

    if (parseInt(date.date) < 10) {
      date.date = '0' + date.date
    }
    this.systemTime = date.year + '-' + date.month + '-' + date.date
    console.log(this.systemTime)
  },
  beforeUnmount() {
    if (!this.myChartss) {
      return;
    }
    this.myChartss.dispose();
    this.myChartss = null;
    if (!this.myCharts) {
      return;
    }
    this.myCharts.dispose();
    this.myCharts = null;
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
};
</script>

<style scoped lang="scss">
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .sousuo {
    display: flex;
    width: 1608px;
    height: 72px;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    ::v-deep label{
      color: #666;
    }
    ::v-deep .ant-form{
      width: 100%;
    }
    ::v-deep .ant-select{
      width: 196px;
    }
    .form-end{
      float: right;
      margin-right: 13px;
      ::v-deep button{
        margin-left: 12px;
      }
    }
  }
  .echarts-box {
    display: flex;
    flex-direction: row;
    width: 1608px;
    height: 299px;
    margin-top: 20px;
    //flex: 1;
    .huanjing {
      display: flex;
      flex: 1;
      width: 34%;
      height: 299px;
      padding: 20px;
      >span {
        width: 72px;
        height: 18px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 18px;
      }
    }
    .kongqi {
      margin-left: 20px;
      display: flex;
      width: 57%;
      height: 299px;
      padding: 20px 30px 5px;
      flex-direction: column;
      .air-header-box {
        >span {
          width: 72px;
          height: 18px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 18px;
        }
        .btn-end {
          float: right;
          ::v-deep .ant-calendar-picker-input {
            width: 380px;
          }
        }
      }
    }
  }
  .huanjingyinzi {
    display: flex;
    margin-top: 20px;
    width: 1608px;
    height: 387px;
    padding: 20px;
    flex-direction: column;
    .divisor-header-box {
      >span {
        width: 72px;
        height: 18px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 18px;
      }
      .btn-end {
        float: right;
        ::v-deep .ant-calendar-picker-input {
          width: 224px;
        }
      }
    }
    .zhexian {
      width: 1500px;
      height: 326px;
      margin: 0 auto;
    }
  }


  #juxing {
    width: 1187px;
    height: 17px;
    margin: -107px 108px;
    border: 1px #5d7092 dashed;
  }
}
</style>